<!-- eslint-disable vue/multi-word-component-names -->

<!-- 自定义头像组件 必传参数：avatar_name ; 定义avatar_width 自动根据大小生成正方形。 -->
<template>
  <div>
    <svg :height= 'bindData.avatar_height' :width='bindData.avatar_width' class="userAvatarClass">
      <rect :fill= 'bindData.avatar_bg_color' :height= 'bindData.avatar_height' :width= 'bindData.avatar_width' />
      <text text-anchor="middle" :fill='bindData.avatar_txt_color' :font-size='bindData.avatar_txt_font_size'
      :x='bindData.avatar_x'  :y='bindData.avatar_y' :font-family='bindData.avatar_txt_font_family'>
        {{ bindData.avatar_name }}
      </text>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import type { UserAvatar } from '.';

 const props = defineProps<{avatarData : UserAvatar}>();//参数

 const bindData = ref<UserAvatar>({
  avatar_name: '',
  avatar_txt_font_size: '',
  avatar_txt_font_family: '',
  avatar_txt_color: '',
  avatar_bg_color: '',
  avatar_width: '',
  avatar_height: '',
  avatar_x : '',
  avatar_y : ''
 });
 const tempWidth = ref<string>('')

 watch(() => props.avatarData,
    async (val) => {
      console.log(val);
    if (val) {
      if(props.avatarData && props.avatarData.avatar_name){
        tempWidth.value = props.avatarData.avatar_width.replace("px",'') || '300';
        bindData.value.avatar_width = props.avatarData.avatar_width || tempWidth.value;
        bindData.value.avatar_height = props.avatarData.avatar_height || tempWidth.value;
        bindData.value.avatar_x = (Number(tempWidth.value) * 0.5).toString();
        bindData.value.avatar_y = (Number(tempWidth.value) * 0.6).toString();
        bindData.value.avatar_txt_font_size = (Number(tempWidth.value) * 0.4).toString();
        bindData.value.avatar_name = props.avatarData.avatar_name.charAt(0) || 'A' ;
        bindData.value.avatar_bg_color = props.avatarData.avatar_bg_color || 'hsl(277, 62%, 45%)';
        bindData.value.avatar_txt_font_family = props.avatarData.avatar_txt_font_family || 'sans-serif'
        bindData.value.avatar_txt_color = props.avatarData.avatar_txt_color || '#ffffff'
        console.error(bindData.value)
      }
    }
  },
  { deep: true, immediate: true }
);

</script>

<style scoped>
.userAvatarClass{
  border-radius: 5px;
}
</style>
